<template>
  <div class="kb">
    <div class="flex-center">
      <ul class="kb-input kb-input__ul" @tap="showKeyboard">
        <li
          v-for="(item, index) in textBaseArr"
          :key="item"
          @tap="energy(index)"
          :style="index === textArr.length ? 'border-color:'+activeBorder : 'border-color:'+baseBorder"
          :class="[index === 7 && isEnergy? energyClass : '' , inputClass]"
        >{{item}}</li>
      </ul>
    </div>

    <div class="kb-keyboard">
      <div
        class="kb-keyboard__over row-wrap"
        v-show="show"
        @tap="closeKeyboard"
      ></div>
      <div
        class="kb-keyboard__panle row-wrap"
        :class="keyboardClass"
        v-show="show"
      >
        <!--省份简写键盘-->
        <div
          v-show="!isAlph"
          v-for="(proItem, i) in province "
          :key="i"
          @tap="tapKeyboard(proItem)"
          class="kb-keyboard__td"
          :class="keycapClass"
          hover-class="kb-keyboard__td-tap-theme"
          hover-start-time="0"
          hover-stay-time="40"
        >{{proItem}}</div>

        <!--数字字母键盘-->
        <button
          v-show="isAlph"
          v-for="(numItem, j) in natural "
          :key="j"
          @tap="tapKeyboard(numItem)"
          class="kb-keyboard__td-num"
          :class="naturalClass"
          hover-class="kb-keyboard__td-tap-theme"
          hover-start-time="0"
          hover-stay-time="40"
          :disabled="!isNum"
        >{{numItem}}</button>

        <!--字母键盘-->
        <div
          v-show="isAlph"
          v-for="(alItem , k) in 'QWERTYUPASDFGHJKLZX巛CVBNM' "
          :key="k"
          @tap="tapKeyboard(alItem)"
          class="kb-keyboard__td-num"
          :class="alphClass"
          hover-class="kb-keyboard__td-tap-theme"
          hover-start-time="0"
          hover-stay-time="40"
        >
          <text v-if="alItem === '巛'" :class="delClass"></text>
          <text v-else-if="k !== '巛'">{{alItem}}</text>
        </div>

        <!-- 完成按钮 -->
        <div
          v-if="isAlph && textArr.length > 6"
          @tap="tapFinished"
          class="kb-keyboard__td-finished"
          :class="finishedClass"
          hover-class="kb-keyboard__td-tap-fin-theme"
          hover-start-time="0"
          hover-stay-time="60"
        >{{extraKey}}</div>
        <div
          v-if="isAlph && textArr.length < 7"
          class="kb-keyboard__td-finished"
          :class="finishedBaseClass"
        >{{extraKey}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    inputClass: {
      type: String,
      default: "kb-input__li flex-center"
    },
    energyClass: {
      type: String,
      default: "kb-input__new-energy"
    },
    keyboardClass: {
      type: String,
      default: "kb-keyboard__panle-style"
    },
    province: {
      type: String,
      default: "京津沪冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤川青藏琼宁渝"
    },
    keycapClass: {
      type: String,
      default: "kb-keyboard__td-theme"
    },
    natural: {
      type: String,
      default: "1234567890"
    },
    naturalClass: {
      type: String,
      default: "kb-keyboard__td-theme"
    },
    alphClass: {
      type: String,
      default: "kb-keyboard__td-theme"
    },
    delClass: {
      type: String,
      default: "kb-keyboard__del"
    },
    baseBorder: {
      type: String,
      default: "#cccccc"
    },
    activeBorder: {
      type: String,
      default: "#ff7149"
    },
    extraKey: {
      type: String,
      default: "完成"
    },
    plateNum: {
      type: String,
      default: ""
    },
    finishedClass: {
      type: String,
      default: "kb-keyboard__finished"
    },
    finishedBaseClass: {
      type: String,
      default: "kb-keyboard__finished-base"
    }
  },
  data() {
    return {
      isNum: false,
      isAlph: false,
      isEnergy: true,
      textBaseArr: ["", "", "", "", "", "", "", ""],
      textArr: [],
      tapVal: ""
    };
  },
  computed: {},
  methods: {
    showKeyboard() {
      this.show = true;
      this.$emit("update:show", true);
    },
    closeKeyboard() {
      this.show = false;
      this.$emit("update:show", false);
    },
    tapKeyboard(tapval) {
      this.tapVal = tapval;

      if (this.tapVal === "巛") {
        this.textArr.pop();
        this.textBaseArr.splice(this.textArr.length, 1, "");
        if (this.textArr.length === 7 && !this.isEnergy && this.tapVal !== "") {
          this.isEnergy = true;
          this.tapVal = "";
        }
      } else {
        if (this.textArr.length > 7) return false;
        if (this.textArr.length > 6 && this.isEnergy) {
          this.textBaseArr.splice(6, 1, this.tapVal);
          this.textArr.splice(6, 1, this.tapVal);
          this.$emit("update:plateNum", this.textArr.join(""));
          return false;
        }
        this.textArr.splice(this.textArr.length, 0, this.tapVal);
        this.textBaseArr.splice(this.textArr.length - 1, 1, this.tapVal);
      }

      if (this.textArr.length === 1) {
        this.isAlph = true;
        this.isNum = false;
      } else if (this.textArr.length === 0) {
        this.isAlph = false;
        this.isNum = false;
      } else {
        this.isNum = true;
      }
      this.$emit("update:plateNum", this.textArr.join(""));
    },
    tapFinished(e) {
      let textValue = this.textArr.join("");
      this.$emit("keyboard", textValue);
    },
    energy(index) {
      if (index === 7 && this.isEnergy && this.textArr.length === 7) {
        this.isEnergy = false;
      }
    }
  },
  mounted() {}
};
</script>
<style>
.kb {
  width: 100%;
  height: 100%;
}
.kb-input {
  width: 100%;
  height: 60px;
  font-size: 18px;
  position: relative;
  top: 50px;
}
.kb-input__ul {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  width: 92%;
  height: 61px;
  z-index: 999;
}
.kb-input__li {
  width: 36px;
  height: 52px;
  border: 2px solid #cccccc;
  border-radius: 4px;
  background-color: #ffffff;
}
.kb-input__active {
  border: 1px solid #24c6dc;
}
.kb-input__new-energy {
  width: 42px;
  height: 54px;
  background: url();
  background-size: 100% 100%;
  border: none;
  border-radius: 5px;
}

.kb-keyboard {
  width: 100vw;
  background-color: #ffffff;
}

.kb-keyboard__over {
  z-index: 888;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.kb-keyboard__panle {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  z-index: 999;
}
.kb-keyboard__panle-style {
  border-bottom: 8px solid #eaf1f9;
  border-top: 10px solid #eaf1f9;

  --from: #eaf1f9;
  --to: #eaf1f9;

  background: linear-gradient(130deg, var(--from), var(--to));
  background: -webkit-linear-gradient(130deg, var(--from), var(--to));
}
.kb-keyboard__td {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: calc(100vw / 10);
  font-size: 18px;
  height: 48px;
  margin: 2px;
  border-radius: 5px;
}
.kb-keyboard__td-num {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  flex-grow: 1;
  -webkit-flex-grow: 1;
  flex: 1 1 10%;
  -webkit-flex: 1 1 10%;
  max-width: 8.6vw;
  font-size: 18px;
  height: 48px;
  margin: 2px;
  border-radius: 5px;
}
.kb-keyboard__td-finished {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 110px;
  height: 48px;
  margin-top: 2px;
  margin-left: 10px;
  font-size: 18px;
  border-radius: 5px;
}
.kb-keyboard__del {
  width: 100%;
  height: 100%;
  background: url();
  background-size: 100% 100%;
}
.kb-keyboard__finished {
  border: 1px solid #2f62ed;
  background-color: #2f62ed;
  color: #ffffff;
}
.kb-keyboard__finished-base {
  border: 1px solid #cdd0d5;
  background-color: #cdd0d5;
  color: #1e1e1e;
}
.kb-keyboard__td-theme {
  border: 1px solid #cdd0d5;
  color: #1e1e1e;
  box-shadow: 3px 3px 1px #cdd0d5;
  -webkit-box-shadow: 3px 3px 1px #cdd0d5;
  background: #fff;
}
.kb-keyboard__td-tap-theme {
  border: 1px solid #cdd0d5;
  color: #1e1e1e;
  --from: #e5e2e2;
  --to: #e5e5e5;

  background: linear-gradient(130deg, var(--from), var(--to));
  background: -webkit-linear-gradient(130deg, var(--from), var(--to));
}
.kb-keyboard__td-tap-fin-theme {
  border: 1px solid #cdd0d5;
  color: #fff;
  --from: #cdd0d5;
  --to: #b8b8b9;

  background: linear-gradient(130deg, var(--from), var(--to));
  background: -webkit-linear-gradient(130deg, var(--from), var(--to));
}

.flex-center {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

.row-wrap {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
</style>
